<template>
  <div class="water" style="height: 100%">
    <div class="pageTitleSubTitle">
      <div class="title">消费明细</div>
      <div class="btn">
        <a-button type="primary">导入</a-button>
        <a-button type="primary">导出</a-button>
      </div>
    </div>
    <Search :search="search" @searchVal="searchVal" />
    <div class="storeContent" style="height: calc(100% - 185px)">
      <a-table style="width: 100%" :columns="columns" :data-source="columnsData" :pagination="false" :rowKey="(record,index) => index" :scroll="{ x: 1600 }">
        <span slot="picture" slot-scope="picture"><img :src="picture" alt=""></span>
        <span slot="area" slot-scope="area">{{area && area.name?area.name:'--'}}</span>
        <span slot="store" slot-scope="store">{{store && store.name?store.name:'--'}}</span>
        <span slot="key" slot-scope="key,record" class="operation">
          <span @click="toOrder(record)">查看</span>
        </span>
      </a-table>
      <Pagination :current="page" :total="total" @pageSize="pageSize" />
    </div>
  </div>
</template>
<script>
  import Search from '@/common/search/index'
  import Pagination from '@/common/pagination/index'

  export default {
    name:'water',
    components:{Search,Pagination},
    data(){
      return {
        page:1,
        total:0,
        columns:[
          { title: '序号', dataIndex: 'id', key: 'id' },
          { title: '订单编号', dataIndex: 'order_short_no', key: 'order_short_no' },
          { title: '所属军区', dataIndex: 'area', key: 'area', scopedSlots: { customRender: 'area' }},
          { title: '所属门店', dataIndex: 'store', key: 'store', scopedSlots: { customRender: 'store' }},
          // { title: '所属职称', dataIndex: 'customer_name1', key: 'customer_name1'},
          { title: '会员姓名', dataIndex: 'customer_name', key: 'customer_name'},
          { title: '支付订单', dataIndex: 'customer_no', key: 'customer_no'},
          { title: '支付方式', dataIndex: 'payment_method_text', key: 'payment_method_text'},
          // { title: '消费类目', dataIndex: 'sales1', key: 'sales1'},
          { title: '数量', dataIndex: 'num', key: 'num'},
          { title: '支付金额', dataIndex: 'payment_amount', key: 'payment_amount'},
          { title: '服务人员', dataIndex: 'staffs_name', key: 'staffs_name'},
          { title: '收银人员', dataIndex: 'operate_staff', key: 'operate_staff'},
          // { title: '客服', dataIndex: 'time', key: 'time'},
          // { title: '订单渠道', dataIndex: 'people', key: 'people'},
          { title: '支付时间', dataIndex: 'payment_at', key: 'payment_at'},
          { title: '备注', dataIndex: 'remark', key: 'remark'},
          { title: '操作', dataIndex:'key', key:'key', scopedSlots: { customRender: 'key' }}
        ],
        columnsData:[],
        searchText:{},
        detailList:[
          {title:'经营流水',key:'1',val:'1234567432'},
          {title:'交易单数',key:'1',val:'1234567432'},
          {title:'退款总额',key:'1',val:'1234567432'},
          {title:'退款单数',key:'1',val:'1234567432'},
          {title:'净额',key:'1',val:'1234567432'},
        ],
        search:[
          {
            type:'input',
            name:'订单编号',
            place:'请输入编号',
            val:'',
            key:'order_short_no',
          },
          {
            type:'select',
            name:'所属军区',
            place:'请选择军区',
            val:'',
            key:'area_no',
            idKey:'area_no',
            nameKey:'name',
            selectData: []
          },
          {
            type:'select',
            name:'所属门店',
            place:'请选择门店',
            val:'',
            key:'store_no',
            idKey:'store_no',
            nameKey:'name',
            selectData: []
          },
          {
            type:'select',
            name:'支付方式',
            place:'请选择方式',
            val:'',
            key:'payment_method_id',
            idKey:'id',
            nameKey:'name',
            selectData: []
          },
          {
            type:'dateSelect',
            name:'日期范围',
            place:'请选择日期',
            val:[],
            key:['start_time','end_time'],
            selectId:1,
            idKey:'id',
            idName:'name',
            selectData: [
              {id:1,name:'今日'},
              {id:2,name:'昨日'},
              {id:3,name:'本周'},
              {id:4,name:'本月'},
            ]
          }
        ],
        jurisdiction:[
          { key:'admin-consumption-detail-info', back:'look'},
        ],
        configJurisdiction:{}
      }
    },
    created() {
      this.getList();
      this.getSearchData();
      this.configJurisdiction = this.getJurisdiction(2,this.jurisdiction);
    },
    methods:{
      pageSize(e){
        this.page = e;
        this.getList()
      },
      searchVal(e){
        if(e.selectId !==0){
          switch (e.selectId) {
            case 1:
              let day2 = new Date();
              day2.setTime(day2.getTime());
              let s2 = day2.getFullYear()+"-" + (day2.getMonth()+1) + "-" + day2.getDate();
              e.start_time = s2+' '+'00:00:00';
              e.end_time = s2+' '+'23:59:59';
              break;
            case 2:
              let day1 = new Date();
              day1.setTime(day1.getTime()-24*60*60*1000);
              let s1 = day1.getFullYear()+"-" + (day1.getMonth()+1) + "-" + day1.getDate();
              e.start_time = s1+' '+'00:00:00';
              e.end_time = s1+' '+'23:59:59';
              break;
            case 3:
              const end = new Date();
              let start = new Date(new Date() - (new Date().getDay() - 1) * 86400000);
              let s3 = start.getFullYear()+"-" + (start.getMonth()+1) + "-" + start.getDate();
              let ends3 = end.getFullYear()+"-" + (end.getMonth()+1) + "-" + end.getDate();
              e.start_time = s3+' '+'00:00:00';
              e.end_time = ends3+' '+'23:59:59';
              break;
            case 4:
              const end1 = new Date();
              let start1 = new Date(new Date().getYear(), new Date().getMonth(), 1);
              let s4 = start1.getFullYear()+"-" + (start1.getMonth()+1) + "-" + start1.getDate();
              let ends4 = end1.getFullYear()+"-" + (end1.getMonth()+1) + "-" + end1.getDate();
              e.start_time = s4+' '+'00:00:00';
              e.end_time = ends4+' '+'23:59:59';
          }
        }
        this.searchText = e;
        this.getList()
      },
      getList(){
        let data = this.searchText;
        data.size = 10;
        data.page = this.page;
        if(!data.hasOwnProperty('start_time')){
          let day2 = new Date();
          day2.setTime(day2.getTime());
          let s2 = day2.getFullYear()+"-" + (day2.getMonth()+1) + "-" + day2.getDate();
          data.start_time = s2+' '+'00:00:00';
          data.end_time = s2+' '+'23:59:59';
        }
        this.Api.consumerDetails(data).then(res=>{
          res.items.forEach(item=>{
            item.order_short_no = item.order.order_short_no;
            item.customer_name = item.customer?item.customer.name:'--';
            item.payment_at = item.order.payment_at;
            item.payment_method_text = item.payment_method?item.payment_method.name:'--';
            item.operate_staff = item.order.operate_staff?item.order.operate_staff.name:'--';
            item.remark = item.order.remark?item.order.remark:'--';
            let staffs_names = [];
            item.staffs.forEach(demo=>{
              staffs_names.push(demo.staff?demo.staff.name:'--')
            });
            item.staffs_name = staffs_names.length>0?staffs_names.join('、'):'--';
          });
          this.columnsData = res.items;
          this.total = res.total
        })
      },
      getSearchData(){
        this.Api.areaStores().then(res=>{
          if(res.code !== 200) return;
          this.search.forEach(item=>{
            if(item.key === 'area_no') item.selectData = res.data.areas;
          });
        });
        this.Api.permission().then(res=>{
          if(res.code !== 200) return;
          this.search.forEach(item=>{
            if(item.key === 'store_no') item.selectData = res.data;
          });
        });
        this.Api.paymentMethods().then(res=>{
          if(res.code !== 200) return;
          this.search.forEach(item=>{
            if(item.key === 'payment_method_id'){
              item.selectData = res.data
            }
          })
        })
      },
      toOrder(item){
        this.$router.push({path:'/admin-order-info',query:{id:item.id}})
      }
    }
  }
</script>
